import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button, Modal, Tooltip,Spin,Row,Col,message} from 'antd';
import {
  WeaRightMenu,
  WeaTab,
  WeaAlertPage,
  WeaTop,
  WeaNewScroll,
  WeaLeftRightLayout,
  WeaPopoverHrm,
  WeaBrowser,
} from 'ecCom';
const toJS = mobx.toJS;
const confirm = Modal.confirm;
import WorkSummary from './WorkSummary';
import * as Util from '../../../util/Util';

/**
 * 模板设置
 * jiansong 2019/6/18
 */
@inject ('planProgramViewStore')
@observer
export default class TemplateSettingIndex extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      showSearchAd: false,
      topTab: [
        {
          title: '月报',
          viewcondition: '1',
        },
        {
          title: '周报',
          viewcondition: '2',
        },
      ],
      tabSelectKey: '1',
      monthWeekSelectComDisplayKey: '',
      locationkey: '',
      currentSelectYear: '',
      currentSelectMonth: '',
      currentSelectWeek: '',
      showLeft: false,
      menu: this.getRightMenuButtons (),
      _height: Util.getCurrentHeight (),
      heightInit: false,
    };
    this.store = this.props.planProgramViewStore;
  }

  componentWillMount () {
    //一些初始化请求
    this.store.getTemplateConfig ();
  }
  getTopConfig = () => {
    let {menu} = this.state;

    return {
      title: (
        <div style={{display: 'inline-block'}}>
          <span
            dangerouslySetInnerHTML={{__html: this.store.result.titlename}}
          />
          <span style={{color: 'gray', fontSize: '12px'}}>
            {this.store.result.mbTitle}
          </span>
        </div>
      ),
      icon: <i className="icon-coms-implement" />,
      iconBgcolor: 'rgb(150, 53, 138)',
      buttons: this.getButtons (),
      showDropIcon: true,
      dropMenuDatas: this.getRightMenuButtons (),
    };
  };

  getRightMenuButtons = () => {
    const {buttonAuth} = this.props.planProgramViewStore;
    let buttonArray = [];
    let _this = this;

    if (buttonAuth.canSave) {
      buttonArray.push ({
        key: '2',
        icon: <i className="icon-coms-Save-as" />,
        content: '保存',
        onClick: key => {
          confirm ({
            title: '确认提示',
            content: '确认保存此模板设置吗?',
            onOk () {
              _this.store.saveTemplateConfig ();
            },
            onCancel () {},
          });
        },
      });
    }

    if (buttonAuth.canDel) {
      buttonArray.push ({
        key: '1',
        icon: <i className="icon-coms-delete" />,
        content: '删除',
        onClick: key => {
          this.deleteTemplateConfig ();
        },
      });
    }

    if (buttonAuth.canShare) {
      buttonArray.push ({
        key: '0',
        icon: <i className="icon-coms-organization-down" />,
        content: '同步',
        onClick: key => {
          this.refs.templateShare.openModal ();
        },
      });
    }

    return buttonArray;
  };

  getButtons = () => {
    const {buttonAuth} = this.props.planProgramViewStore;
    let buttonArray = [];

    let _this = this;

    if (buttonAuth.canSave) {
      buttonArray.push (
        <Tooltip title="保存自定义模板">
          <Button
            type="primary"
            onClick={() => {
              confirm ({
                title: '确认提示',
                content: '确认保存此模板设置吗?',
                onOk () {
                  _this.store.saveTemplateConfig ();
                },
                onCancel () {},
              });
            }}
          >
            保存
          </Button>
        </Tooltip>
      );
    }

    if (buttonAuth.canDel) {
      buttonArray.push (
        <Tooltip title="删除自定义模板">
          <Button onClick={() => this.deleteTemplateConfig ()}>
            删除
          </Button>
        </Tooltip>
      );
    }

    if (buttonAuth.canShare) {
      buttonArray.push (
        <Tooltip title="同步该模板给其他人员">
          <Button onClick={() => this.refs.templateShare.openModal ()}>
            同步
          </Button>
        </Tooltip>
      );
    }

    return buttonArray;
  };

  deleteTemplateConfig = () => {
    let _this = this;
    confirm ({
      title: '确认提示',
      content: '确认删除此模板设置吗?',
      onOk () {
        _this.store.deleteTemplate ();
      },
      onCancel () {},
    });
  };

  onReferenceChange = (ids, names, datas) => {
    this.store.referenceParam.ids = ids;
    this.store.referenceParam.names = names;
    this.store.doReference ();
  };

  getTabConfig = () => {
    let {topTab, selectedKey, showSearchAd} = this.state;
    const {tabSelectKey} = this.store;

    return {
      datas: this.store.tabDatas,
      showSearchAd: showSearchAd,
      keyParam: 'viewcondition', //主键
      selectedKey: tabSelectKey,
      onChange: e => {
        this.store.tabSelectKey = e;
        this.store.getTemplateConfig ();
      },
    };
  };
  getRightMenuConfig = () => {
    return {
      datas: this.getRightMenuButtons (),
      showUrlItem: false,
      style: {height: '100vh'},
    };
  };

  onAuditBrowerChange = (ids, names,datas) => {
    this.store.auditids = ids;
    this.store.auditList=datas
  };

  getHeight (header) {
    let h = 0;
    if (header) {
      h = header.clientHeight || 0;
    }
    return window.innerHeight - h;
  }

  //添加直接上级到列表
  addManager2Audit=()=>{
    let {auditList,auditids,managerid,managermap} = this.store
    auditList=toJS(auditList)
    if(managerid=='0'){
      message.info('您没有直接上级！');
      return 
    }else{
      if(auditList && auditList.length>0){
        let hasManager =false
        auditList.map(v=>{
          if(v.id==managerid)hasManager=true
        })
        if(!hasManager){
          auditList.push(managermap)
          auditids+=(","+managerid+",")
        }else{
          message.info('上级领导已添加');
        }
      }else{
        auditList=[]
        auditList.push(managermap)
        auditids+=managerid+","
      }
    }
    this.store.auditList=auditList
    this.store.auditids=auditids
  }

  render () {
    let {_height} = this.state;

    let {buttonAuth} = this.store;
    return (
      <div
        style={{height: _height}}
        className="wea-workrelate-plan-program-view"
      >

        <WeaRightMenu {...this.getRightMenuConfig ()}>
          <Spin spinning={this.store.loading}>
          <WeaTop {...this.getTopConfig ()} />
          <WeaLeftRightLayout
            isNew={true}
            leftWidth={200}
            showLeft={this.state.showLeft}
            onCollapse={showLeft => this.setState ({showLeft})}
          >
            {this.store.noDataMessage
              ? <div style={{position: 'relative', height: 230}}>
                  <WeaAlertPage iconSize={100}>
                    <div style={{color: '#f00'}}>
                      {this.store.noDataMessage}
                    </div>
                  </WeaAlertPage>

                </div>
              : <WeaNewScroll style={{height: _height - 60}}>
                  <WeaTab {...this.getTabConfig ()} />
                  <WorkSummary />
                </WeaNewScroll>}
          </WeaLeftRightLayout>
          </Spin>
        </WeaRightMenu>
        }

        <WeaBrowser
          style={{display: 'none'}}
          title="同步"
          ref="templateShare"
          type={17}
          isSingle={false}
          customized
          inputStyle={{width: 200}}
          onChange={(ids, names, datas) =>
            this.onReferenceChange (ids, names, datas)}
          viewAttr={buttonAuth.canSave ? '2' : '1'}
        />

        <WeaPopoverHrm />
      </div>
    );
  }
}
